<template>
  <div class="prediction-overview-container">
    <div class="algorithm-selector">
      <h3>预测算法</h3>
      <el-radio-group v-model="selectedMethod" @change="onMethodChange">
        <el-radio-button label="moving_average">移动平均法</el-radio-button>
        <el-radio-button label="exponential_smoothing">指数平滑法</el-radio-button>
        <el-radio-button label="linear_trend">线性趋势预测</el-radio-button>
      </el-radio-group>
      <p class="algorithm-description">{{ methodDescriptions[selectedMethod] }}</p>
    </div>

    <div class="stats-grid">
      <!-- 当月销售额 -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon current">
            <el-icon><Calendar /></el-icon>
          </div>
          <div class="stat-title">当月销售额</div>
        </div>
        <div class="stat-value" v-if="!loading">
          ¥{{ formatNumber(predictionData.current_month_amount) }}
        </div>
        <div class="stat-value" v-else>
          <el-skeleton :rows="1" animated />
        </div>
        <div class="stat-footer">
          {{ predictionData.current_month || '本月' }}
        </div>
      </div>

      <!-- 预测销售额 -->
      <div class="stat-card highlight">
        <div class="stat-header">
          <div class="stat-icon prediction">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="stat-title">下月预测销售额</div>
        </div>
        <div class="stat-value" v-if="!loading">
          ¥{{ formatNumber(predictionData.prediction) }}
        </div>
        <div class="stat-value" v-else>
          <el-skeleton :rows="1" animated />
        </div>
        <div class="stat-footer growth" v-if="!loading && predictionData.growth_rate !== undefined">
          <span :class="{ 'positive': predictionData.growth_rate > 0, 'negative': predictionData.growth_rate < 0 }">
            <el-icon v-if="predictionData.growth_rate > 0"><ArrowUp /></el-icon>
            <el-icon v-else-if="predictionData.growth_rate < 0"><ArrowDown /></el-icon>
            {{ Math.abs(predictionData.growth_rate).toFixed(1) }}% 环比
          </span>
        </div>
        <div class="stat-footer" v-else>
          <el-skeleton :rows="1" animated />
        </div>
      </div>

      <!-- 置信区间 -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon confidence">
            <el-icon><Odometer /></el-icon>
          </div>
          <div class="stat-title">预测区间</div>
        </div>
        <div class="stat-value smaller" v-if="!loading">
          ¥{{ formatNumber(predictionData.lower_bound) }} - ¥{{ formatNumber(predictionData.upper_bound) }}
        </div>
        <div class="stat-value" v-else>
          <el-skeleton :rows="1" animated />
        </div>
        <div class="stat-footer" v-if="!loading">
          置信区间 ±{{ predictionData.confidence_interval?.toFixed(1) }}%
        </div>
        <div class="stat-footer" v-else>
          <el-skeleton :rows="1" animated />
        </div>
      </div>

      <!-- 预测准确率 -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon accuracy">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stat-title">预测准确率</div>
        </div>
        <div class="stat-value" v-if="!loading">
          {{ predictionData.accuracy?.toFixed(1) }}%
        </div>
        <div class="stat-value" v-else>
          <el-skeleton :rows="1" animated />
        </div>
        <div class="stat-footer">
          基于历史预测误差计算
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { Calendar, DataAnalysis, Odometer, CircleCheck, ArrowUp, ArrowDown } from '@element-plus/icons-vue';

const props = defineProps({
  predictionData: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['method-change']);

// 默认选择移动平均法
const selectedMethod = ref('moving_average');

// 算法描述
const methodDescriptions = {
  'moving_average': '使用最近几个月的平均销售额作为预测值，适合短期预测和相对稳定的销售模式。',
  'exponential_smoothing': '对近期数据赋予更高权重，能够更好地反映最新的销售趋势变化。',
  'linear_trend': '基于历史数据拟合线性趋势，预测未来销售走势，适合具有明显增长或下降趋势的情况。'
};

// 监听传入的预测数据变化
watch(() => props.predictionData, (newValue) => {
  if (newValue && newValue.method) {
    selectedMethod.value = newValue.method;
  }
}, { deep: true });

// 处理预测方法变更
function onMethodChange(method) {
  emit('method-change', method);
}

// 格式化数字显示
function formatNumber(num) {
  if (num === undefined || num === null) return '-';
  return num.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}

// 初始化时通知父组件当前选择的预测方法
onMounted(() => {
  emit('method-change', selectedMethod.value);
});
</script>

<style scoped>
.prediction-overview-container {
  margin-bottom: 20px;
}

.algorithm-selector {
  margin-bottom: 20px;
  background-color: var(--bg-card, #13142a);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--border-color, #2a2a57);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.algorithm-selector h3 {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e0e0ff);
}

.algorithm-description {
  margin: 15px 0 0;
  font-size: 14px;
  color: var(--text-secondary, #b8b8cc);
  line-height: 1.5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: var(--bg-card, #13142a);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--border-color, #2a2a57);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.stat-card:hover {
  background-color: var(--bg-card-hover, #1a1c35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.stat-card.highlight {
  background: linear-gradient(135deg, rgba(58, 54, 219, 0.15), rgba(0, 201, 255, 0.15));
  border: 1px solid rgba(0, 201, 255, 0.3);
}

.stat-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin-right: 12px;
}

.stat-icon.current {
  background: linear-gradient(135deg, #6a63fb, #a262ff);
}

.stat-icon.prediction {
  background: linear-gradient(135deg, #3a36db, #00c9ff);
}

.stat-icon.confidence {
  background: linear-gradient(135deg, #00c9ff, #00e1d9);
}

.stat-icon.accuracy {
  background: linear-gradient(135deg, #00e1d9, #00ffb3);
}

.stat-icon .el-icon {
  font-size: 18px;
  color: white;
}

.stat-title {
  font-size: 14px;
  color: var(--text-secondary, #b8b8cc);
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary, #e0e0ff);
}

.stat-value.smaller {
  font-size: 18px;
}

.stat-footer {
  font-size: 12px;
  color: var(--text-tertiary, #7171a6);
}

.stat-footer.growth .positive {
  display: flex;
  align-items: center;
  color: #00ffb3;
}

.stat-footer.growth .negative {
  display: flex;
  align-items: center;
  color: #ff5e7b;
}

.stat-footer.growth .el-icon {
  margin-right: 4px;
}

@media (max-width: 1400px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style> 